<template>
	<view>
		<view style="width: 100%;">
			<u-tabs :scrollable="false" :list="tab.list"  @click="tabClick"></u-tabs>
		</view>
		<view v-if="tab.show.detail">
			<u-row customStyle="padding: 10px">
				<u-col span="12">
					<u-divider text="项目信息" textPosition="left"></u-divider>
					<u--form labelWidth="120" labelPosition="left" :model="project.form" ref="uForm">
						<u-form-item label="项目名称" prop="name" borderBottom ref="name">
							<u--input v-model="project.form.name" border="none"></u--input>
						</u-form-item>
						<u-form-item label="打印编号开头" prop="begincode" borderBottom ref="code">
							<u--input v-model="project.form.begincode" border="none"></u--input>
						</u-form-item>
						<u-form-item>
							<u-upload :fileList="project.tmplogo" accept="image" capture="['album', 'camera']" deletable 
							  @afterRead="handleAfterRead" @beforeRead="handleBeforeUpload" width="120" height="120" @delete="deleteLogo"
							  name="cover" :multiple="false"  :maxCount="1" :previewFullImage="true"
							></u-upload>
						</u-form-item>
						<u-form-item label="打印价钱(分)" prop="cost" borderBottom ref="cost">
							<u--input type="number" v-model="project.form.cost" border="none"></u--input>
							<view>
								转化后：<text style="color:red;">￥{{project.form.cost/100}} 元</text>
							</view>
						</u-form-item>
						<u-form-item>
							<u-button type="primary" :loading="project.button.loading"  @click="editProject">编辑项目</u-button>
						</u-form-item>
					</u--form>
					<u-divider text="打印机信息" textPosition="left"></u-divider>
					<u-list @scrolltolower="scrolltolower">
						<u-list-item v-for="(item, index) in printer.list" :key="index">
							<u-cell :title="'打印机'+(index+1)">
								<view slot="label">
									<view style="float: left;display: flex;">
										<u-tag v-if="item.printer_status==1" size="mini" text="在线" type="success" plain></u-tag>
										<u-tag v-if="item.printer_status==0" size="mini" text="离线" type="error" plain></u-tag>
										<u-tag v-if="item.printer_status!=1&&item.printer_status!=0" size="mini" text="未知" type="warning" plain></u-tag>
									</view>
								</view>
								<view slot="value">
									<u-button type="primary" 
										:loading="printer.button.loading" 
										:disabled="printer.button.disabled" 
									:text="printer.button.text" 
									@click="getPrinterStatus(item.id,item.deviceId,item.deviceKey,index)"></u-button>
								</view>
							</u-cell>
						</u-list-item>
					</u-list>
				</u-col>
			</u-row>
		</view>

		<view v-if="tab.show.record">
			<u-row>
				<u-col span="12" customStyle="padding: 10px">
					<u-search :showAction="true" actionText="搜索" placeholder="请输入微信昵称" v-model="record.keyword" @custom="getRecordLsit" @click="getRecordLsit" @search="getRecordLsit"></u-search>
				</u-col>
			</u-row>
			<u-row>
				<u-col span="12" customStyle="padding: 10px">
					<u-list @scrolltolower="recordScrolltolower">
					      <u-list-item v-for="(item, index) in record.list" :key="index">
					        <u-cell :title="item.nickname">
								<u-avatar slot="icon" shape="square" size="35" :src="item.avatar"></u-avatar>
								<view slot="label">
									<u--text size="12" type="info" :text="item.addtime"></u--text>
									<view>
										<u--text v-if="item.task_id!=''" size="12" type="error"  text="已打印"></u--text>
										<u--text v-else size="12" type="info"  text="未打印"></u--text>
									</view>
								</view>
								<view slot='value'>
									<u-button type="primary" @click="openRecordInfo(item)" size="mini" text="详情"></u-button>
								</view>
							</u-cell>
					      </u-list-item>
					</u-list>
				</u-col>
			</u-row>
			<u-popup :overlayStyle="record.info.popup.overlayStyle" :show="record.info.popup.show" :zIndex="record.info.popup.zIndex" :closeOnClickOverlay="false" mode="right" @close="record.info.popup.show=false;" >
				<view style="padding:8px;">
					<audio :src="record.info.content.url" :poster="record.info.content.avatar"
					 :author="record.info.content.nickname" :name="record.info.content.nickname"
					 controls></audio>
					<view>
						<u-button :disabled="record.info.task.button.disabled" type="error" @click="addTask(record.info.content.record_id)" text="打印"></u-button>
					</view>
					<view style="margin-top: 8px;">
						<u-button type="info" 
						 
						 @click="record.info.popup.show=false;" text="关闭"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				tab:{
					list:[
						{name: '项目信息',value:'detail'},
						{name: '录音信息',value:'record'},
					],
					show:{
						detail:true,
						printer:false,
						record:false,
					}
				},
				project:{
					tmplogo:[],
					projectId:0,
					detail:{},
					form:{
						projectId:0,
						name:'',
						cost:'0',
						begincode:'',
						logo:''
					},
					button:{
						loading:false
					},
					rules: {
						name: [
							{
								required: true,
								message: '请输入项目名称',
								trigger: ['blur', 'change']
							}
						],
						begincode:[
							{
								required: true,
								message: '请输入项目价钱',
								trigger: ['blur','change']
							}
						]
					}
				},
				printer:{
					list:[],
					button:{
						loading:false,
						disabled:false,
						text:'点击刷新',
						
					},
					status:3
				},
				record:{
					list:[],
					keyword:'',
					info:{
						content:{},
						popup:{
							show:false,
							zIndex:10075,
							overlayStyle:''
						},
						task:{
							button:{
								disabled:false
							}
						}
					},
					page:1
				}
			}
		},
		onLoad(options){
			this.projectId=options.projectId;
			this.getProjectById();
		},
		methods: {
			tabClick(item){
				console.log(item);
				if(item.name=='项目信息'){
					this.tab.show.detail=true;
					this.tab.show.record=false;
				}else{
					this.tab.show.detail=false;
					this.tab.show.record=true;
					this.getRecordLsit();
				}
			},
			getProjectById(){
				const that=this;
				const data={
					projectId:this.projectId
				}
				uni.$u.http.post('/api/tools.Project/getProjectById',data).then(res=> {
					that.project.detail=res.result.detail;
					that.printer.list=res.result.printer
					that.project.form.projectId=res.result.detail.id;
					that.project.form.name=res.result.detail.name;
					that.project.form.cost=res.result.detail.cost.toString();
					that.project.form.begincode=res.result.detail.begincode;
					that.project.form.logo=res.result.detail.logo;
					that.project.tmplogo.push({url:res.result.detail.logo});
					console.log(that.project.tmplogo)
					console.log(res.result.detail);
				});
			},
			editProject(){
				const that=this;
				this.$refs.uForm.validate().then(res => {
					console.log(res);
					this.project.button.loading=true;
					uni.$u.http.post('/api/tools.Project/editProject',this.project.form).then(data=>{
						that.project.button.loading=false;
						console.log(data);
						uni.showToast({
				　　　　　　title: data.message,
				　　　　　　icon: 'success',
				　　　　　　success: () => {
				　　　　　　　　setTimeout(function() {
									uni.navigateTo({
										url:'/pages/index/detail?projectId='+that.projectId
									})
				　　　　　　　　}, 1000);
				　　　　　　}
			　　　　		})
					})
				}).catch(errors => {
						uni.$u.toast('校验失败')
				})
			},
			getPrinterStatus(printerId,deviceId,deviceKey,index){
				const that=this;
				const data={
					projectId:printerId,
					deviceId:deviceId,
					deviceKey:deviceKey
				};
				this.printer.button.disabled=true;
				this.printer.button.loading=true;
				this.printer.button.text="获取中..."
				uni.$u.http.post('/api/tools.Printer/getPrinterStatus',data).then(res=> {
					that.printer.button.disabled=false;
					that.printer.button.loading=false;
					that.printer.button.text="点击刷新"
					that.printer.list[index].printer_status=res.result.printer_status
					console.log(res);
				});
			},
			getRecordLsit(e){
				console.log(e);
				const that=this;
				if(this.record.keyword!=''){
					this.record.list=[];
						this.record.page=1;
				}
				const data={
					projectId:this.projectId,
					keyword:this.record.keyword,
					page:this.record.page
				};
				uni.$u.http.post('/api/tools.Record/getRecordByProjectId',data).then(res=> {
					console.log(res);
					if(res.result.list.length>0){
						for (let i = 0; i < res.result.list.length; i++) {
							that.record.list.push(res.result.list[i])
						}
						that.record.page=that.record.page+1;
					}
				});
			},
			recordScrolltolower(){
				
			},
			openRecordInfo(content){
				console.log(content);
				this.record.info.popup.show=true;
				this.record.info.content=content;
			},
			addTask(id){
				this.record.info.popup.zIndex=922;
				this.record.info.popup.overlayStyle={"z-index":923}
				const that=this;
				uni.showModal({
					title: '提示：',
					content: '是否打印该录音？',
					success: function(res) {
						that.record.info.popup.zIndex=10075;
						
						if (res.confirm) {
							that.record.info.task.button.disabled=true;
							uni.$u.http.post('/api/tools.Printer/addTask',{record_id:id}).then(res=>{
								console.log(res);
								uni.showToast({
									title: res.message,
									duration: 2000
								});
								that.record.info.task.button.disabled=false;
							})
						   
						}
						return;
					}
				});
			},
			deleteLogo(event){
				console.log(event);
				this.project.tmplogo=[];
			},
			handleBeforeUpload(file, lists, name){
				console.log(file, lists, name);
			},
			async handleAfterRead(file, lists, name){
				if(file.file.type!='image'){
					uni.showToast({ title: '请上传2M以内的图片',icon: 'error',mask: true});
					return;
				}
				if(file.file.size>2097152){
					uni.showToast({ title: '请上传2M以内的图片',icon: 'error',mask: true});
					return;
				}
				this.project.tmplogo.push({url:file.file.url,status: "uploading",message: "上传中"});
				const result=await this.uploadFilePromise(file.file.url);
				this.project.tmplogo=[];
				this.project.tmplogo.push({url:result,status: "success",message: "上传成功",});
				this.project.form.logo=result;
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "https://ihearduapi.1415926.com.cn/api/tools.Project/uploadImage", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "image",
						header:{
							// 'Content-Type': 'application/json',
							auth:uni.getStorageSync('auth'),
							openid:uni.getStorageSync('openid')
						},
						formData: {
						  projectId: this.projectId,
						},
						success: (res) => {
							const result=JSON.parse(res.data);
							setTimeout(() => {
								resolve(result.result.url);
							}, 1000);
						},
					});
				});
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.project.rules)
		},
	}
</script>

<style scoped>
	.uni-modal{
		z-index: 10078 !important;
	}
</style>
